<template>
    <div class="grid-content bg-purple-dark">
        <el-card class="box-card">
            <div class="mycontainer">
                <p class="mycontext">注<br>册<br>用<br>户<br>分 <br> 析</p>
                <hr>
                <div class="mycharts" id="mycharts" style="width: 100%;height: 168px;">
                    <div id="mycharts" style="width: 100%;height: 168px;"></div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { selectIndent } from '@/api/dashboard.js'
export default {
    props: ['childtime'],
    data() {
        return {
            endtime: '',
            myChart: null
        }
    },
    mounted() {
        this.endtime = this.childtime
        this.myChart = echarts.init(document.getElementById('mycharts'));
        this.handleechart1()
    },
    methods: {
        async handleechart1() {
            let myChart = this.myChart
            if (this.endtime) {
                this.endtime = this.$day(this.endtime).format('YYYY-MM-DD')
            } else {
                this.endtime = this.$day(new Date()).format('YYYY-MM-DD')
            }
            let obj = {
                endtime: this.endtime
            }
            let param = new URLSearchParams(obj)
            const Userx = await selectIndent('/selectRegisterUserx', param)
            const Usery = await selectIndent('/selectRegisterUsery', param)
            myChart.setOption({
                
                tooltip: {},
                color:['green'],
                xAxis: {
                    data: Userx.data
                },
                yAxis: {},
                grid:{
                    top:10,
                    bottom:'10%',
                    right:0
                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: Usery.data
                    }
                ]
            });
        }
    }
}
</script>

<style  scoped>
.mycontainer {
    display: flex;
    padding: 20px;
    /* background-color: yellow; */
}

.mycontext {
    margin-right: 8px;
}

.mycharts {
    flex: 1;
    /* background-color: green; */
    height: 100%;
}
</style>